<script setup lang="ts">
import { reactive, ref } from "vue";
import ReCol from "@/components/ReCol";

/** 字段类型限制 */
interface FormItemProps {
  /**订单号 */
  orderno: string;
}
interface FormProps {
  formInline: FormItemProps;
}

/** 表单校验规则 */
const createRules = reactive({
  orderno: [{ required: true, message: "订单编号为必填项", trigger: "blur" }]
});

/** 设置表单默认值 */
const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({
    /**订单编号*/
    orderno: ""
  })
});

const newFormInline = ref(props.formInline);

/** 表单DOM结构 */
const ruleFormRef = ref();

function getRef() {
  return ruleFormRef.value;
}

defineExpose({ getRef });
</script>

<template>
  <el-form
    ref="ruleFormRef"
    :model="newFormInline"
    :rules="createRules"
    label-width="96px"
  >
    <el-row :gutter="30">
      <re-col :value="24">
        <el-form-item label="订单编号" prop="orderno">
          <el-input v-model="newFormInline.orderno" />
        </el-form-item>
      </re-col>
    </el-row>
  </el-form>
</template>
